<template>
	<view class="history-container">
		<!-- 头部 -->
		<view class="history-header">
			<text class="title">历史反馈记录</text>
			<uni-icons type="close" size="24" @click="navigateBack" />
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<picker mode="date" fields="month" @change="handleDateChange">
				<view class="filter-item">
					{{ selectedDate || '选择月份' }}
					<uni-icons type="calendar" size="16" color="#666" />
				</view>
			</picker>
		</view>

		<!-- 反馈列表 -->
		<scroll-view class="feedback-list" scroll-y>
			<view v-for="(item, index) in filteredFeedbacks" :key="index" class="feedback-card"
				:class="statusClass(item.status)">
				<view class="feedback-header">
					<text class="campus">{{ item.campus_name }}</text>
					<text class="time">{{ formatTime(item.created_at) }}</text>
				</view>
				<view class="location-info">
					<text class="canteen">{{ item.canteen_name }}</text>
					<text class="restaurant">{{ item.restaurant_name }}</text>
				</view>
				<text class="content">{{ item.content }}</text>
				<view class="status-line">
					<text class="status-tag">{{ statusText[item.status]}}</text>
					<!-- 				<text v-if="item.reply" class="reply-tag">已回复</text> -->
				</view>
			</view>

			<view v-if="filteredFeedbacks.length === 0" class="empty">
				<image src="/static/empty-feedback.png" class="empty-img" />
				<text class="empty-text">暂无反馈记录</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		queryUserFeedback
	} from '../../request/api.js'

	// 反馈数据
	const feedbackList = ref([])

	const selectedDate = ref('')

	// 加载数据
	const loadHistory = async () => {
		try {
			const res = await queryUserFeedback()
			feedbackList.value = res.feedbacks
			// feedbackList.value = res.data.map(item => ({
			// 	...item,
			// 	created_at: item.created_at.replace('T', ' ')
			// }))
		} catch (error) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		}
	}

	// 格式化时间
	const formatTime = (timeStr) => {
		const date = new Date(timeStr)
		return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
	}

	// 状态样式
	const statusClass = (status) => {
		return {
			'status-pending': status === 'pending',
			'status-processing': status === 1,
			'status-replied': status === 2,
			'status-closed': status === 3
		}
	}

	const statusText = {
		pending: '待处理',
		replied: '已回复',
		closed: '已关闭'
	}

	// 过滤数据
	const filteredFeedbacks = computed(() => {
		return feedbackList.value.filter(item => {
			if (!selectedDate.value) return true
			return item.created_at.startsWith(selectedDate.value)
		})
	})

	// 事件处理
	const handleDateChange = (e) => {
		selectedDate.value = e.detail.value
	}

	const navigateBack = () => {
		uni.navigateBack()
	}

	loadHistory()
</script>

<style scoped>
	.history-container {
		padding: 40rpx;
		background: #f8f9fc;
		min-height: 100vh;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.filter-bar {
		margin-bottom: 30rpx;
	}

	.filter-item {
		background: white;
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
		display: inline-flex;
		align-items: center;
	}

	.feedback-list {
		height: calc(100vh - 240rpx);
	}

	.feedback-card {
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.feedback-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.campus {
		font-weight: 500;
		color: #1a1a1a;
	}

	.time {
		color: #999;
		font-size: 24rpx;
	}

	.location-info {
		display: flex;
		gap: 20rpx;
		margin-bottom: 16rpx;
	}

	.canteen::before {
		content: '食堂：';
		color: #666;
	}

	.restaurant::before {
		content: '餐厅：';
		color: #666;
	}

	.content {
		color: #333;
		line-height: 1.6;
		margin-bottom: 24rpx;
	}

	.status-line {
		display: flex;
		gap: 16rpx;
		align-items: center;
	}

	.status-tag {
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
	}

	.reply-tag {
		color: #67c23a;
		font-size: 24rpx;
	}

	/* 状态颜色 */
	.status-pending .status-tag {
		background: #fef0f0;
		color: #f56c6c;
	}

	.status-processing .status-tag {
		background: #f0f9eb;
		color: #67c23a;
	}

	.status-replied .status-tag {
		background: #ecf5ff;
		color: #409eff;
	}

	.status-closed .status-tag {
		background: #f4f4f5;
		color: #909399;
	}

	.empty {
		text-align: center;
		padding: 100rpx 0;
	}

	.empty-img {
		width: 300rpx;
		height: 200rpx;
		opacity: 0.6;
		margin-bottom: 24rpx;
	}

	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
</style>